<template id="search_address">
	<div class="search_address">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/edit_address"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>选择地址</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->
		<!--请输入大厦或小区名称-->
		<div class="search_village">
			<input type="text" id="suggestId" name="address_detail" v-model="address_detail" class="input_style" placeholder="请输入大厦或小区名称" />
			<button @click.stop="haha(address_detail)">确认</button>
		</div>
		<div id="allmap">

		</div>
		<!--请输入大厦或小区名称结束-->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				address_detail: '', //详细地址
				userlocation: {
					lng: "",
					lat: ""
				},
			}
		},
		mounted() {
			let th = this
			this.$nextTick(function() {
				// 创建Map实例
				var map = new BMap.Map("allmap");
				// 初始化地图,设置中心点坐标，
				var point = new BMap.Point(116.4, 39.9); // 创建点坐标，获得公司的经纬度坐标
				var gc = new BMap.Geocoder();
				map.centerAndZoom(point, 15);
				map.enableScrollWheelZoom();
				var ac = new BMap.Autocomplete( //建立一个自动完成的对象
					{
						"input": "suggestId",
						"location": map
					})
				gc.getLocation(point, function(rs) {
					var addComp = rs.addressComponents;
				});
				let myValue
				ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
					let _value = e.item.value;
					myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
					this.address_detail = myValue
					this.baidu = myValue
					console.log(this.address_detail)
					setPlace();
				});

				function setPlace() {
					map.clearOverlays(); //清除地图上所有覆盖物
					function myFun() {
						th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
						map.centerAndZoom(th.userlocation, 18);
						map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
					}

					var local = new BMap.LocalSearch(map, { //智能搜索
						onSearchComplete: myFun
					});
					local.search(myValue);
					//					
					//测试输出坐标（指的是输入框最后确定地点的经纬度）
					map.addEventListener("click", function(e) {
						//经度
						console.log(th.userlocation.lng);
						//维度
						console.log(th.userlocation.lat);

					})
				}

			})
		},
		methods: {
			haha(address_detail) {
				setTimeout(() => {
					console.log(this)
					//                  console.log($('#suggestId').val())
					var baiduapi = encodeURI($('#suggestId').val());
					console.log(baiduapi)

					var jd = this.userlocation.lng
					var wd = this.userlocation.lat
						this.$router.push({
							path: "/new_address",
							query: {
								baiduapi,
								jd,
								wd,
								username:this.$route.query.username,
								phone:this.$route.query.phone,
								detailAddr:this.$route.query.detailAddr,
                about_coach:this.$route.query.about_coach,
                coachid:this.$route.query.coachid
							}
						})
				}, 1000)
				
			}

		}
	}
</script>

<style scoped>
	@import "../../assets/css/search_address.css";
</style>
